<template>
  <el-dialog title="打印表单" :visible.sync="printOpen" width="1200px" append-to-body :before-close="closeDelDialog">
    <div class="app-container" style="float: right">
      <el-button type="danger" plain size="medium" @click="print">打印</el-button>
      <el-button @click="closeDelDialog">取 消</el-button>
    </div>
    <div class="table">
      <div>
        <table class="custom-table">
          <tbody>
          <tr>
            <td class="title" :colspan="colspan">
              {{ this.printTitle }}
            </td>
          </tr>

          <tr v-for="(rowData, rowIndex) in tableData" :key="rowIndex">
            <td v-for="(cellData, colIndex) in rowData" :key="colIndex" :colspan="cellData.colspan" :rowspan="cellData.rowspan" class="custom-cell" :style="cellData.style">
             <!-- {{ cellData.value }} -->
              <span v-if="cellData.value!=null" v-html="insertLineBreaks(cellData.value, 90)"></span>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </el-dialog>
</template>

<script>

export default {
  props: {
    printOpen: {
      type: Boolean,
      default: false
    },
    colspan: {
      type: String,
      default: '4'
    }
  },
  data() {
    return {
      tableData: [],
      printTitle: ""
    }
  },
  methods: {
    init(val,printTitle) {
      console.log(val,printTitle)
      this.printTitle = printTitle
      this.tableData = val;
    },
    //关闭页面
    closeDelDialog() {
      this.$emit("printCancel")
    },
    insertLineBreaks(value, length) {
      console.log(value,length)
      // 在指定位置插入换行符
      return value.replace(new RegExp(`.{${length}}`, 'g'), '$&<br>');
    },
    print() {
      const tableElement = document.querySelector('.custom-table');
      const iframe = document.createElement('iframe');
      iframe.style.display = 'none';
      document.body.appendChild(iframe);
      const iframeDoc = iframe.contentWindow.document;

      // const tableElement = document.querySelector('.custom-table');
      //
      // const iframe = document.createElement('iframe');
      // iframe.style.display = 'none';
      // document.body.appendChild(iframe);
      // const iframeDoc = iframe.contentWindow.document;
      //
      // iframeDoc.body.appendChild(tableElement.cloneNode(true));
      //
      // iframe.contentWindow.print();

      iframeDoc.open();
      iframeDoc.write(`
          <html>
          <head>
<!--            <title>打印表单</title>-->
            <style>
              @media print {
                .custom-table {
                  width: 100%; /* 设置表格宽度为100% */
                  border-collapse: collapse; /* 合并单元格边框 */
                }
                .custom-cell {
                  padding:5px 5px 5px 5px;
                  align-items:center;
                  justify-content:flex-start;
                  opacity:1;
                  color:#000000;
                  letter-spacing:2px;
                  font-family:仿宋;
                  font-size:16px;
                  border: 1px solid #000; /* 设置单元格边框样式 */
                  padding: 8px; /* 设置单元格内边距 */
                  text-align: center; /* 设置单元格文本居中 */
                }
                .title {
                  heigth: 5em;
                  line-height: 5em;
                  text-align: center;
                  padding:5px 5px 5px 5px;
                  align-items:center;
                  justify-content:center;
                  letter-spacing:4px;
                  font-weight:bold;
                  font-family:宋体;
                  font-size:24px;
                  opacity:1;
                }
              }
            </style>
          </head>
          <body>
             ${tableElement.outerHTML}
            <script>
              window.onload = function() {
                window.print();
                window.close();
              }
            <\/script>
          </body>
          </html>
      `);
      iframeDoc.close();
    }
  }
}
</script>

<style lang="scss" scoped>
.table {
  margin-top: 5px;
  padding: 1%;
}
.custom-table {
  width: 100%; /* 设置表格宽度为100% */
  border-collapse: collapse; /* 合并单元格边框 */
}

.custom-cell {
  padding:5px 5px 5px 5px;
  align-items:center;
  justify-content:flex-start;
  opacity:1;
  color:#000000;
  letter-spacing:2px;
  font-family:仿宋;
  font-size:16px;
  border: 1px solid #000; /* 设置单元格边框样式 */
  padding: 8px; /* 设置单元格内边距 */
  text-align: center; /* 设置单元格文本居中 */
}

.title {
  heigth: 5em;
  line-height: 5em;
  text-align: center;
  padding:5px 5px 5px 5px;
  align-items:center;
  justify-content:center;
  letter-spacing:4px;
  font-weight:bold;
  font-family:宋体;
  font-size:24px;
  opacity:1;
}
</style>
